<%@ page contentType="text/html; charset=utf-8" language="java" %>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<style>
	.divclass {
		text-align: center;
		border: 1px solid #ccc;
		background: #fafafa;
		color: #444;
		width:100px;
		padding: 0px 5px ;
		margin-top:2px;
	}
</style>

<section class="content">
	<div class="row">
		<div class="col-md-12">
			<div class="box-body" style="padding:0px">
				<table class="table table-bordered">
					<tr>
						<th width="15%">字段列表</th>
     					<th width="85%">表单排版</th>
					</tr>
					<tr>
	        			<td>
	        				<div id="fieldListDiv">
	        					<c:forEach items='${listString}' var="field">
	        						<div class="divclass">${field}</div>
	        					</c:forEach>
	        				</div>
	        			</td>
	        			<td>
	        				<form id="appConfig-template-form">
		        				<input type="hidden" name="appId" value="${appId }">
		        				<div style="width:100%;padding:0px 10px;height:150px" id="formTempDiv"></div>
	        				</form>
	        			</td>
	        		</tr>
				</table>
				<div class="handlePanel" style="margin-bottom: 15px;margin-top: 15px;">
					<a title="绘制表格" class="a-btn" data-toggle="tooltip" id="editTable"> 
						<span class="fa fa-plus"></span> 
						<span class="text">表格绘制</span>
					</a>
					<a title="表单预览" class="a-btn" data-toggle="tooltip" onclick="preview()"> 
						<span class="fa fa-internet-explorer"></span> 
						<span class="text">表单预览</span>
					</a>
				</div>
			</div>
		</div>
	</div>
	<form method="post" id="formPreview" style="display: none" name="formPreview" target="_blank">
		<input type="text" id="htmlSource" name="htmlSource"/>
		<input type="text" id="appId" name="appId" value="${appId }"/>
		<input type="text" id="isPreview" name="isPreview" />
	</form>
</section>
<div class="modal-footer">
	<button type="button" id="sub_table" class="btn btn-primary">生成表单</button>
</div>
<script type="text/javascript" src="${pageContext.request.contextPath}/workflow/js/form-template.js"/>
<script>
    $(function() {
    	$('[data-toggle="tooltip"]').tooltip();
    	
    	$('.item-data').css('display', 'none');
		
		$('#fieldListDiv .divclass').draggable({
			helper: "clone",//拖动时克隆,默认是 original
			opacity: 0.40,//设置对象被拖动时的透明度
			cursor: 'pointer',//拖拽时鼠标指针样式
			snap: true
		});
		
		$("#editTable").click(function(){
			dialog.modal("${pageContext.request.contextPath}/workflow/app/editTable.jsp", "编辑表格",true,false, 500);
		});
		
    });
</script>